#page-2 {
  background-image: url(../images/p-2/bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;

  .loudou {
    height: 51%;
    position: relative;
    img.loudou-image {
      max-height: 100%;
      max-width: 100%;
      .center-block();
      position: relative;
      z-index: 10;
    }

    img.ll-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  }

  .ll {
    position: absolute;
    display: none;
    &.ll-1 {
      width: 50px;
    }

    &.ll-2 {
      width: 40.5px;
    }

    &.ll-3 {
      width: 49px;
    }

    &.ll-4 {
      width: 25.5px;
    }

    &.ll-5 {
      width: 40.5px;
    }

    &.ll-6 {
      width: 43px;
    }

    img {
      width: 100%;
    }
  }

  .float-time {
    position: absolute;
    .square(100%);
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);

    .num {
      font-size: 92px;
      font-weight: bold;
      text-align: center;
      color: #fff;
      position: relative;
      top: 30%;
      transform: scale(0, 0);
      -webkit-transform: scale(0, 0);

      &.anim {
        .animation(countDown 0.5s);
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
      }
    }

    .yao {
      height: 15%;
      position: relative;
      top: 30%;
      margin-top: 20px;

      img {
        max-height: 100%;
        max-width: 100%;
        .center-block();
        .animation(yao 0.3s linear infinite);
      }
    }
  }
}

@-webkit-keyframes countDown {
  from {
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
  }
  to {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}

@keyframes countDown {
  from {
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
  }
  to {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}

@keyframes yao {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }
  100% {
    transform: rotate(-0deg);
    -webkit-transform: rotate(-0deg);
  }
}

@-webkit-keyframes yao {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }
  100% {
    transform: rotate(-0deg);
    -webkit-transform: rotate(-0deg);
  }
}



